<template>
  <div class="history">
    <!-- <div class="his-header flex js-sp align-center mb_30">
      <div class="date">
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          format="YYYY-MM-DD HH:mm:ss"
          :range-separator="$t('exchange.to')"
          :start-placeholder="$t('exchange.startDate')"
          :end-placeholder="$t('exchange.endDate')"
          @change="changeDate"
        ></el-date-picker>
      </div>
      <div
        class="select bd-borderBase flex js-sp align-center point"
        @click="select"
        v-clickout="outselect"
      >
        <span class="text-14 textperson-t3">
          {{
            state.currency_match === ""
              ? $t("exchange.tradingPair")
              : state.currency_match
          }}
        </span>
        <i class="el-icon-arrow-down textperson-t2"></i>
        <div class="curency-box person-bg point" v-if="state.isselect">
          <el-input
            :placeholder="$t('exchange.search')"
            v-model="state.searchname"
          >
            <template #append>
              <span class="personlink text-14" @click="search">{{
                $t("exchange.comfirm")
              }}</span>
            </template>
          </el-input>
          <div
            class="curency-singel textperson-t2 text-14 text-left"
            v-for="item in state.currency"
            :key="item.id"
            @click="
              chooseCurrency(item.id, item.currency_name, item.legal_name)
            "
          >
            {{ item.currency_name + "/" + item.legal_name }}
          </div>
        </div>
      </div>
      <div class style="width:140px">
        <el-select
          v-model="state.list_param.transaction_direction"
          :placeholder="$t('exchange.directionTip')"
        >
          <el-option
            v-for="item in state.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div
        class="btn bd-borderBase textperson-t3 text-14 point"
        @click="Refresh"
      >
        {{ $t("exchange.reset") }}
      </div>
      <div
        class="btn share-color text-14 bgpersonlink point text-ellipsis"
        @click="onSubmit"
      >
        {{ $t("exchange.inquire") }}
      </div>
      <div>
        <el-checkbox v-model="state.list_param.hide_revoked">{{
          $t("exchange.hideRevoked")
        }}</el-checkbox>
      </div>
    </div> -->
    <el-table
      :data="state.tableData"
      header-cell-class-name="eltablebg"
      style="width: 100%;margin-bottom:30px"
    >
      <el-table-column
        prop="created_at"
        :label="$t('assets.time')"
      ></el-table-column>
      <el-table-column prop="currency_name" :label="$t('exchange.tradingPair')">
        <template #default="r">
          <span>{{ r.row.symbol_name }}</span>
          <!-- <span>{{
            r.row.transaction_type == 1
              ? $t("exchange.marketPrice")
              : r.row.transaction_type == 2
              ? $t("exchange.limitPrice")
              : $t("exchange.stopLoss")
          }}</span> -->
        </template>
      </el-table-column>
      <el-table-column
        prop="transaction_direction"
        :label="$t('exchange.direction')"
      >
        <template #default="r">
          <span>{{r.row.type_name }}</span>
<!-- 
          <span
            :class="
              r.row.transaction_direction == 1 ? 'text-green' : 'text-red'
            "
            >{{
              r.row.transaction_direction == 1
                ? $t("exchange.buy")
                : $t("exchange.sell")
            }}</span
          > -->
        </template>
      </el-table-column>
      <el-table-column
        prop="transaction_unit_price"
        :label="$t('exchange.price')"
      >
        <template #default="r">{{
          $currency(r.row.number)
        }}</template>
      </el-table-column>
      <!-- <el-table-column
        prop="transaction_total_amount"
        :label="$t('assets.amount')"
      >
        <template #default="r">
          {{
            $currency(
              decimalDigitsInputFilter(r.row.transaction_total_amount, 6)
            )
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="transaction_make_amount"
        :label="$t('exchange.dealDone')"
      >
        <template #default="r">
          {{
            r.row.transaction_make_amount === 0
              ? "--"
              : $currency(
                  decimalDigitsInputFilter(r.row.transaction_make_amount, 6)
                )
          }}
        </template>
      </el-table-column>
      <el-table-column prop="address" :label="$t('exchange.totalTurnover')">
        <template #default="r">
          <span>
            {{
              rideFix(
                r.row.transaction_average_price,
                r.row.transaction_make_amount
              ) === 0
                ? "--"
                : $currency(
                    decimalDigitsInputFilter(
                      rideFix(
                        r.row.transaction_average_price,
                        r.row.transaction_make_amount
                      ),
                      6
                    )
                  )
            }}
          </span>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="transaction_average_price"
        :label="$t('exchange.handlingFee')"
      >
        <template #default="r">
          <span>
            {{
              r.row.fee
            }}
          </span>
        </template>
      </el-table-column>

      <!-- <el-table-column prop="transaction_status" :label="$t('assets.status')">
        <template #default="r">
          <span>
            {{
              r.row.transaction_status == 0
                ? $t("exchange.pengding")
                : r.row.transaction_status == 1
                ? $t("exchange.commissioning")
                : r.row.transaction_status == 2
                ? $t("exchange.completed")
                : $t("exchange.cancelled")
            }}
          </span>
        </template>
      </el-table-column> -->
      <template #empty>
        <Norecord />
      </template>
    </el-table>
    <Pagination
      :total="state.total"
      :current="state.currentPage"
      :size="state.list_param.limit"
      @currentchange="currentchange"
    />
  </div>
</template>

<script>
import { reactive, ref, onMounted, watch } from "vue";
import { transactionRecordPage, currencyMatchList } from "@/api/currency";
import { demotransactionRecordPage } from "@/api/demo";
import UseSystemSetting from "@/commonapi/useSystemSetting";
import { microtradeLists } from "@/api/assets";
// import { formatDate } from "@/utils/times";
import Pagination from "@/components/pagination/index.vue";
import Norecord from "@/components/noRecord/NoRecord.vue";
import { decimalDigitsInputFilter } from "@/utils/common";
import { useI18n } from "vue-i18n";
import { rideFix } from "@/utils/precisionMath.js";
export default {
  name: "History",
  components: { Pagination, Norecord },
  setup() {
    const { t } = useI18n();
    const state = reactive({
      isselect: false,
      list_param: { page: 1, limit: 20, hide_revoked: false },
      tableData: [],
      page: "",
      currentPage: 1,
      lever_status: 1,
      total: 0,
      options: [
        {
          value: 1,
          label: t("exchange.buy"),
        },
        {
          value: 2,
          label: t("exchange.sell"),
        },
      ],
      currency: [], // 交易对
      copycurrency: [], //交易对供查询
      currency_match: "",
      searchname: "", //查询交易对
    });
    watch(
      () => state.list_param.hide_revoked,
      (newData, oldData) => {
        console.log(oldData);
        state.list_param.hide_revoked = newData;
        state.currentPage = 1;
        getList();
      }
    );
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    watch(
      () => virtual_wallet.value,
      () => {
        state.currentPage = 1;
        state.list_param.page = 1;
        getList();
      }
    );
    const select = () => {
      state.isselect = true;
    };
    const outselect = () => {
      state.isselect = false;
    };
    const value1 = ref([]);
    // 获取列表
    const getList = () => {
      console.log('历史记录-----')
      const data = { ...state.list_param };
      data.hide_revoked = state.list_param.hide_revoked;
      state.loading = true;
      // let setFun = virtual_wallet.value
      //   ? demotransactionRecordPage
      //   : transactionRecordPage;
      data.match_id=3
      data.status=3
      let setFun=microtradeLists
      setFun(data)
        .then((res) => {
          state.loading = false;
          state.tableData = res.data.data;
          state.total = res.data.total;
        })
        .catch((err) => {
          console.log(err);
          state.loading = false;
        });
    };
    // 重置
    const Refresh = () => {
      state.currentPage = 1;
      state.list_param.hide_revoked = false;
      state.list_param.page = 1;
      state.list_param.currency_match_id = null;
      state.currency_match = "";
      state.list_param.start_time = null;
      state.list_param.end_time = null;
      value1.value = null;
      state.list_param.transaction_direction = null;
      getList();
    };
    // 获取所有交易对
    const getCurrency = () => {
      const data = {
        currency_match_type: 2,
      };
      currencyMatchList(data).then((res) => {
        state.currency = res.data;
        state.copycurrency = res.data;
      });
    };
    //选择交易对
    const chooseCurrency = (val, currency_name, legal_name) => {
      state.list_param.currency_match_id = val;
      state.currency_match = currency_name + "/" + legal_name;
      outselect();
    };
    // 查询交易对
    const search = () => {
      const arry = state.copycurrency;
      state.currency = arry.filter((item) => {
        return item.currency_name.indexOf(state.searchname) > -1;
      });
    };
    // 选择时间
    const changeDate = () => {
      if (value1.value) {
        state.list_param.start_time = new Date(value1.value[0]).getTime();
        state.list_param.end_time = new Date(value1.value[1]).getTime();
      } else {
        state.list_param.start_time = null;
        state.list_param.end_time = null;
      }
    };
    const onSubmit = () => {
      state.currentPage = 1;
      getList();
    };
    // 跳转到新页面
    const currentchange = (val) => {
      state.list_param.page = val;
      getList();
    };
    onMounted(() => {
      getList();
      getCurrency();
      // state.active = $router.currentRoute.value.query;
    });
    return {
      state,
      value1,
      select,
      outselect,
      getList,
      Refresh,
      getCurrency,
      chooseCurrency,
      changeDate,
      onSubmit,
      currentchange,
      search,
      decimalDigitsInputFilter,
      rideFix,
    };
  },
};
</script>

<style scoped lang="less">
.select {
  width: 140px;
  position: relative;
  padding: 0 12px;
  height: 40px;
}
.curency-box {
  position: absolute;
  width: 140px;
  height: 169px;
  left: 0;
  bottom: -170px;
  border-radius: 8px;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
  padding: 8px;
  box-sizing: border-box;
  z-index: 99;
  overflow-y: scroll;
}
.curency-box /deep/ .el-input__inner {
  border: none;
  background: #f8f8f8;
  .el-input-group__append {
    border: none;
  }
}
.mb_30 {
  margin-bottom: 30px;
}
.curency-box /deep/ .el-input-group__append {
  width: 30px;
  border: none;
  padding-inline-end: 20px;
  padding-inline-start: 0px;
  background: #f8f8f8;
}
.curency-singel {
  width: 100%;
  height: 36px;
  line-height: 36px;
  padding-inline-start: 10px;
  box-sizing: border-box;
}
.curency-singel :hover {
  background: red;
}
.btn {
  width: 80px;
  height: 34px;
  line-height: 34px;
}
.date /deep/.el-range-editor.el-input__inner {
  width: 314px;
}
.jump {
  width: 44px;
  height: 24px;
  line-height: 24px;
  margin-inline-start: 10px;
}
.page {
  width: 20px;
  height: 20px;
}
</style>
